<template>
  <div class="goods">
    <div class="scroll-nav-wrapper">
      <cube-scroll-nav
        :side="true"
        :data="goods"
        :current="current"
        :options="scrollOptions"
        v-if="goods.length"
        :scroll-events="scrollEvents"
      >
        <template slot="bar" slot-scope="props">
          <cube-scroll-nav-bar
            direction="vertical"
            :labels="props.labels"
            :txts="barTxts"
            :current="props.current"
          >
            <template slot-scope="props">
              <div class="text">
                <!--icon-->
                <span
                  class="support-ico"
                  :class="iconCls"
                  v-if="props.txt.text >= 1"
                  :size="3"
                  :type="props.txt.type"
                  >{</span
                >
                <!--名称-->
                <span>{{ props.txt.name }}</span>
                <!--数量-->
                <span class="num" v-if="props.txt.count">
                  <bubble :nums="props.txt.count"></bubble>
                </span>
              </div>
            </template>
          </cube-scroll-nav-bar>
        </template>

        <cube-scroll-nav-panel
          v-for="item in goods"
          :key="item.name"
          :pos="scrollY"
          :label="item.name"
          :check-top="checkTop"
        >
          <ul>
            <li
              v-for="food in item.foods"
              :key="food.name"
              @click="foodIsName(food)"
            >
              <router-link to="/src/pages/foodDetail">
                <div class="icon">
                  <img :src="food.icon" />
                </div>
                <div class="content">
                  <h2 class="name">{{ food.name }}</h2>
                  <p class="desc"></p>
                  <div class="extra">
                    <span class="count">月售{{ food.sellCount }}份</span>
                    <span>好评率{{ food.rating }}%</span>
                  </div>
                  <div class="price">
                    <span class="now">￥{{ food.price }}</span>
                    <span class="old" v-show="food.oldPrice"
                      >￥{{ food.oldPrice }}</span
                    >
                  </div>
                </div>
              </router-link>
              <cart-control :foods="food" @retCon="retConFn"></cart-control>
            </li>
          </ul>
        </cube-scroll-nav-panel>
      </cube-scroll-nav>
    </div>
    <shop-cart
      :selectFoods="selectFoods"
      :deliveryPrice="seller.deliveryPrice"
      :minPrice="seller.minPrice"
    ></shop-cart>
  </div>
</template>

<script>
import { getVal } from '../api';
import cartControl from './cart-control';
import shopCart from './shop-cart';
import bubble from '../components/bubble';
export default {
  name: 'goods',
  components: {
    cartControl,
    shopCart,
    bubble,
  },
  props: {
    data: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      goods: [],
      rets: [],
      current: '热销榜',
      scrollEvents: ['scroll'],
      nameContent: {},
      scrollOptions: {
        click: false, //去除better-scroll 左右滑动时触发的click冒泡事件
        //当我们需要锁定只滚动一个方向的时候，我们slide-item在初始滚动的时候根据横轴和纵轴滚动的绝对值做差，当差值大于 directionLockThreshold 的时候来决定滚动锁定的方向。
        //备注：当设置 eventPassthrough 的时候，directionLockThreshold 设置无效，始终为 0。
        directionLockThreshold: 0, //
      },
      scrollY: 0,
      checkTop: false,
    };
  },
  computed: {
    seller() {
      return this.data.seller;
    },
    selectFoods() {
      let foods = [];
      this.goods.forEach((good) => {
        good.foods.forEach((food) => {
          if (food.count) {
            foods.push(food);
          }
        });
      });
      return foods;
    },
    barTxts() {
      let ret = [];
      this.goods.forEach((good) => {
        const { type, name, foods } = good;
        let count = 0;
        foods.forEach((food) => {
          count += food.count || 0;
        });
        ret.push({ count, type, name });
      });
      return ret;
    },
  },
  methods: {
    async allEle() {
      const result = await getVal();
      try {
        this.goods = result.data.goods;
      } catch (error) {
        console.log(error);
      }
    },
    foodIsName(val) {
      //详情页展示
      this.$emit('nameCon', val);
      this.$emit('retCon', this.ret);
      sessionStorage.setItem('retCons', JSON.stringify(val));
    },
    retConFn(val) {
      //购物车展示数据
      let ret = [];
      this.goods.forEach((foods) => {
        foods.foods.forEach((food) => {
          if (food.count) {
            ret.push(food);
          }
        });
      });
      sessionStorage.setItem('allCon', JSON.stringify(ret));
    },
  },

  created() {
    this.allEle();
  },
};
</script>

<style lang="stylus" scoped>
.scroll-ele {
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background-color: #fff;
}

.goods {
  position: relative;
  text-align: left;
  height: 100%;

  >>> .cube-scroll-list-wrapper {
    width: 100%;
    text-align: left;
  }

  .cube-scroll-nav-main {
    display: flex;
  }

  >>> .cube-scroll-nav-bar {
    width: 80px;
    white-space: normal;
    overflow: hidden;
  }

  >>> .cube-scroll-nav-bar-item {
    padding: 0 10px;
    display: flex;
    align-items: center;
    height: 56px;
    line-height: 1.5;
    font-size: 12px;
    background: #f3f5f7;

    .text {
      flex: 1;
      position: relative;
    }

    .num {
      position: absolute;
      right: -8px;
      top: -10px;
    }

    .support-ico {
      display: inline-block;
      vertical-align: top;
      margin-right: 4px;
    }
  }

  >>> .cube-scroll-nav-bar-item_active {
    background: $color-white;
    color: $color-dark-grey;
  }

  >>> .cube-scroll-nav-panel-title {
    padding-left: 14px;
    height: 30px;
    line-height: 30px;
    border-left: 2px solid #666;
    font-size: 14px;
    color: #666;
    background: #f3f5f7;
    width: 100%;
  }

  >>> .cube-scroll-nav-panel {
    width: 100%;
    position: relative;

    ul {
      flex: 3;

      li {
        margin: 18px;
        padding-bottom: 18px;
        position: relative;

        a {
          display: flex;
        }

        .icon {
          width: 54px;
          height: 42px;
          flex: 0 0 57px;
          margin-right: 10px;

          img {
            width: 100%;
          }
        }

        .content {
          flex: 1;

          .name {
            margin: 2px 0 8px 0;
            height: 14px;
            line-height: 14px;
            font-size: 14px;
            color: #666;
          }

          .desc, .extra {
            line-height: 10px;
            font-size: 12px;
            color: #999;
          }

          .desc {
            line-height: 12px;
            margin-bottom: 8px;
          }

          .extra {
            .count {
              margin-right: 12px;
            }
          }

          .price {
            font-weight: 700;
            line-height: 24px;

            .now {
              margin-right: 8px;
              font-size: 14px;
              color: red;
            }

            .old {
              text-decoration: line-through;
              font-size: 12px;
              color: #999;
            }
          }
        }
      }
    }
  }

  >>>.food-item {
    position: relative;
  }

  >>>.cart-control-wrapper {
    bottom: 12px;
    position: absolute;
    right: 0;
    font-size: 24px;
    display: flex;
    justify-content: space-between;
  }
}

>>>.cart-decrease, >>>.cart-count, >>>.cart-add {
  color: #00a0dc;
  display: inline-block;
  font-size: 24px;
  line-height: 24px;
  padding: 4px;
  flex: 1;
}

>>>.cart-count {
  font-size: 14px;
  color: #999;
  vertical-align: middle;
}

>>>.cube-scroll-nav-bar-item_active {
  color: #666;
}

>>> .cube-scroll-nav-panel-title {
  position: absolute;
  top: 0;
  left: 0;
}

.shop-cart-wrapper {
  bottom: 0;
  height: 48px;
  left: 0;
  position: absolute;
  width: 100%;
  z-index: 50;

  .shopcart {
    height: 100%;

    .content {
      background: #07111b;
      color: #999;
      display: flex;
      font-size: 0;

      .content-left {
        flex: 1;


        .price {
          border-right: 1px solid hsla(0, 0%, 100%, 0.1);
          box-sizing: border-box;
          display: inline-block;
          font-size: 16px;
          font-weight: 700;
          line-height: 24px;
          margin-top: 12px;
          padding-right: 12px;
          vertical-align: top;
        }

        .desc {
          display: inline-block;
          font-size: 10px;
          line-height: 24px;
          margin: 12px 0 0 12px;
          vertical-align: top;
        }
      }

      .content-right {
        -webkit-box-flex: 0;
        flex: 0 0 105px;
        width: 105px;

        .pay {
          font-size: 12px;
          font-weight: 700;
          height: 48px;
          line-height: 48px;
          text-align: center;
          background: #333;
        }
      }
    }
  }
}

>>>.cube-sticky-ele {
  height: 30px;
}

.scroll-nav-wrapper {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  bottom: 48px;
}

>>>.cube-sticky-fixed {
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}
</style>
